<template>
    <div class="common-layout">
        <el-row>
            <el-table :data="state.data" height="900" 
            :cell-class-name="tableCellClassName"
            @sort-change="sortChange"
            :default-sort="state.sort"
            style="width: 90%">
                <el-table-column prop="date" label="日期" width="110" sortable/>
                <el-table-column prop="中证全指" label="中证全指" sortable width="100"/>
                <el-table-column prop="中证全指LP" label="中证全指LP" sortable width="100"/>
                <el-table-column prop="总记录数" label="总记录数" sortable width="100"/>
                <el-table-column prop="上涨个数" label="上涨个数" sortable width="100"/>
                <el-table-column prop="上涨比率" label="上涨比率" sortable width="100"/>
                <el-table-column prop="LP小于10个数" label="LP小于10个数" sortable width="100"/>
                <el-table-column prop="LP小于10比率" label="LP小于10比率" sortable width="100"/>
                <el-table-column prop="新增LP小于10个数" label="新增LP小于10个数" sortable width="100"/>
                <el-table-column prop="连续下跌3个月" label="连续下跌3个月" sortable  width="100"/>
                <el-table-column prop="连续下跌4个月" label="连续下跌4个月" sortable  width="100"/>
                <el-table-column prop="连续下跌3个月及以上" label="连续下跌3个月及以上" sortable  width="100"/>
            </el-table>
        </el-row>
    </div>
</template>

<script>
import { reactive } from 'vue';
import { getStat } from '../../service/month';
import { formatCurrency, getLpClassName, getNowMonth, getSessionStorage, setSessionStorage } from '../../utils/help';

export default {
    setup() {
        const base = "MonthPctStat"
        const sortPropKey = base + "SortProp"
        const sortOrderKey = base + "SortOrder"

        const state = reactive({
            data : [],
            lastDate: '',
            sort: { 
                prop: getSessionStorage(sortPropKey) || 'date' , 
                order: getSessionStorage(sortOrderKey) || 'descending' 
            }
        })

        getStat().then( res => {
            state.data = res.data

            state.data.forEach(item => {
                if (item.date > state.lastDate) {
                    state.lastDate = item.date
                }
            })
        })

        const sortChange = (column, prop, order) => {
            setSessionStorage(sortPropKey, column.prop)
            setSessionStorage(sortOrderKey, column.order)
        }
        
        const tableCellClassName = ({row, column, rowIndex, columnIndex}) => {
            var columnProperty = column.property
            if (columnProperty == "中证全指LP") {
                return getLpClassName(row["中证全指LP"])
            }

            if (columnProperty == "中证全指") {
                if (row["中证全指"] < 0) {
                    return "lt0-cell"
                }
            }

            if (columnProperty == '上涨比率') {
                if (row['上涨比率'] <= 20) {
                    return "lt0-cell"
                } else if (row['上涨比率'] >= 90) {
                    return "lpgt99-cell"
                }
            }

            if (columnProperty == 'LP小于10比率') {
                if (row['LP小于10比率'] <= 5) {
                    return "lt0-cell"
                }
            }

            if (columnProperty == '交易净额') {
                if (row['交易净额'] < 0) {
                    return "lt0-cell"
                }
            }

            if (row['date'] == state.lastDate) {
                return 'lp-warning-row'
            }

            return ""
        }

        return {state, tableCellClassName, sortChange, formatCurrency}
    }
}
</script>

<style scope>
.lp-warning-row {
    background: rgb(215, 246, 248);
}
</style>